<template>
    <el-row class="tac">
        <!-- 左侧分类栏 -->
        <el-col :span="2">
            <div class="category-header">
                <h5 class="mb-2">文章分类</h5>
                <el-button type="text" style="color: #409eff;" @click="openAddDialog">
                    添加分类
                </el-button>
            </div>

            <!-- 添加分类弹窗 -->
            <el-dialog v-model="addDialogVisible" title="添加分类">
                <el-input v-model="newCateName" placeholder="请输入分类名称" clearable />
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="addDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="confirmAdd">
                            确认添加
                        </el-button>
                    </span>
                </template>
            </el-dialog>

            <!-- 分类菜单 -->
            <el-menu default-active="2" class="el-menu-vertical-demo">
                <el-menu-item :index="x.id.toString()" v-for="x in categoryList" :key="x.id" @click="fetchArticles(x)">
                    <el-icon>
                        <IconMenu />
                    </el-icon>
                    <span>{{ x.name }}</span>
                </el-menu-item>
            </el-menu>
        </el-col>

        <!-- 右侧文章内容区 -->
        <el-col :span="20">
            <div class="article-container">
                <div class="article-item" v-for="(article, idx) in articles" :key="idx">
                    <h2 class="article-title">标题：{{ article.name }}</h2>
                    <div class="article-meta">
                        <span class="article-time">发布时间：{{ formatTime(article.time) }}</span>
                        <span class="article-author">作者：{{ article.author }}</span>
                    </div>
                    <p class="article-content">内容：{{ article.content }}</p>
                </div>
                <div class="no-article" v-if="articles.length === 0">
                    暂无文章，点击左侧分类查看内容
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import http from '@/http'
import {
    ElMessage,
    ElDialog,
    ElInput,
    ElMenu,
    ElMenuItem,
    ElIcon
} from 'element-plus'
import { Menu as IconMenu } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

// 分类列表
const categoryList = ref<any[]>([])
// 文章列表
const articles = ref<any[]>([])
// 添加分类弹窗
const addDialogVisible = ref(false)
// 新分类名称
const newCateName = ref('')

onMounted(() => {
    fetchCategories()
})

/**
 * 获取分类列表
 */
const fetchCategories = () => {
    http.post('cate/')
        .then(res => {
            categoryList.value = res.data.data
        })
        .catch(err => {
            console.error('获取分类失败:', err)
            ElMessage.error('加载分类失败，请重试')
        })
}

/**
 * 点击分类：获取对应文章
 */
const fetchArticles = (category: any) => {
    http.post('textback/', { id: category.id })
        .then(res => {
            articles.value = res.data.data
        })
        .catch(err => {
            console.error('获取文章失败:', err)
            ElMessage.error('加载文章失败，请重试')
        })
}

/**
 * 打开添加分类弹窗
 */
const openAddDialog = () => {
    addDialogVisible.value = true
    newCateName.value = ''
}

/**
 * 确认添加分类
 */
const confirmAdd = () => {
    if (!newCateName.value.trim()) {
        ElMessage.warning('请输入分类名称！')
        return
    }

    http.post('addcate/', { name: newCateName.value })
        .then(res => {
            if (res.data.code === 200) {
                ElMessage.success('添加成功！')
                fetchCategories()
                addDialogVisible.value = false
            } else {
                ElMessage.error(res.data.msg || '添加失败')
            }
        })
        .catch(err => {
            console.error('添加分类失败:', err)
            ElMessage.error('服务器异常，请重试')
        })
}

/**
 * 格式化时间（使用 dayjs）
 */
const formatTime = (time: string | Date) => {
    return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}
</script>

<style scoped>
.tac {
    display: flex;
    min-height: calc(100vh - 60px);
}

/* 左侧分类样式 */
.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.el-menu-vertical-demo {
    border-right: none;
}

/* 右侧文章样式 */
.article-container {
    padding: 20px;
    border-left: 1px solid #eee;
    min-height: calc(100vh - 60px);
}

.article-item {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.article-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
}

/* 时间和作者 */
.article-meta {
    color: #999;
    font-size: 12px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
}

.article-time,
.article-author {
    opacity: 0.9;
}

.article-content {
    margin: 0;
    line-height: 1.6;
    color: #666;
}

.no-article {
    text-align: center;
    color: #999;
    padding: 40px 0;
}
</style>